<div class="path"><a href="{url('homes/index')}">我的空间</a>»<a href="{url('passport/index')}">管理</a>»<a href="{url('passport/photo')}">修改我的头像</a></div>
<div class="title"><h1>修改我的头像</h1></div>
{if $_COOKIE['faceurl']}
<div class="face-imgbox"><img class="facepic" src="{$_COOKIE['faceurl']}" id="imgurl" /></div>
<div id="preview-pane">
    <div class="preview-container">
      <img class="facepic" src="{$_COOKIE['faceurl']}" alt="Preview" />
    </div>
</div>
<div class="face-form">
<form action="/index.php/admin_crop_pic/crop_image_save" method="post" name="form" id="form">
<input name="imgurl" type="hidden" value="{$_COOKIE['faceurl']}" />
<input type="hidden" size="4" id="x1" name="x" /> 
<input type="hidden" size="4" id="y1" name="y" /> 
<input type="hidden" size="4" id="x2" name="y1" /> 
<input type="hidden" size="4" id="y2" name="y2" /> 
<input type="hidden" size="4" id="w" name="w" /> 
<input type="hidden" size="4" id="h" name="h" /> 
<button class="button" type="submit" > 保 存 </button> 请用鼠标在大图上截取您的头像
</form>
</div>
{/if}
<div class="facephoto">
  <div id="uploader">
      <ul id="filelist"></ul>
      <div class="btns">
          <div id="filebutton" class="button button-blue" >选择我的头像图片</div>
      </div>
  </div>
</div>
<style type="text/css">
.face-form{}
.face-imgbox{margin: 10px 0px;}
.jcrop-holder #preview-pane {display: block;position: absolute;z-index: 2000;top:0px;right: -180px;padding: 5px;border: 1px #CCC solid;background-color: white;}
#preview-pane .preview-container {width:160px;height: 160px;overflow: hidden;}

</style>

<script language="javascript">
Do('base','Dialog','Form','Jcrop','webuploader',function(){
  $('#uploader').cpFileUpload({
    uploadUrl:'{url('passport/upfilephoto')}',
    type:'gif,jpg,jpeg,bmp,png',
    complete:function(data){
      window.location.href = '{url('passport/photo')}';
    }
  });
  var jcrop_api,
      $preview = $('#preview-pane'),
      $pcnt = $('#preview-pane .preview-container'),
      $pimg = $('#preview-pane .preview-container img'),
      xsize = $pcnt.width(),
      ysize = $pcnt.height();
    $('#imgurl').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      aspectRatio: xsize / ysize
    },function(){
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      jcrop_api = this;
      $preview.appendTo(jcrop_api.ui.holder);
    });
    function updatePreview(obj){
      if (parseInt(obj.w) > 0){
        var rx = xsize / obj.w;
        var ry = ysize / obj.h;
        $pimg.css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * obj.x) + 'px',
          marginTop: '-' + Math.round(ry * obj.y) + 'px'
        });
      }
      $("#x1").val(obj.x);$("#y1").val(obj.y);$("#x2").val(obj.x2);$("#y2").val(obj.y2);$("#w").val(obj.w);$("#h").val(obj.h);
    };
})
</script>